<!DOCTYPE HTML>
<html>
<head>
	<title><%cameraName%></title>
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
	<script src="Scripts/jquery.cookie.js" type="text/javascript"></script>
	<script src="Scripts/jquery.mousewheel.js" type="text/javascript"></script>
	<script src="Scripts/longclick.js" type="text/javascript"></script>
	<script src="Scripts/CamPage.js" type="text/javascript"></script>
	<script src="Scripts/PtzAbs.js" type="text/javascript"></script>
	<script src="Scripts/hammer.js" type="text/javascript"></script>
	<script type="text/javascript">
		var disableRefreshAfter = <%disableRefreshAfter%>;
		var originwidth = <%originWidth%>;
		var originheight = <%originHeight%>;
		var refreshDelay = <%refreshDelay%>;
		var cameraId = "<%cameraId%>";
		var disableRefreshAfterMinutes = <%(int)Math.Round(TimeSpan.FromMilliseconds(disableRefreshAfter).TotalMinutes)%>;
		var webSocketUrl = "<%webSocketUrl%>";
		var thumbnailBoxPercentWidth = <%thumbnailBoxPercentWidth%>;
		var thumbnailBoxPercentHeight = <%thumbnailBoxPercentHeight%>;
		var zoomMagnification = <%zoomMagnification%>;
	</script>
	<link rel="stylesheet" type="text/css" href="Styles/CamPage.css" />
	<style type="text/css">
		.CamImg
		{
			width: <%originWidth%>px;
			height: <%originHeight%>px;
		}
		#vlcFrame
		{
			width: <%originWidth%>px;
			height: <%originHeight%>px;
		}
	</style>
</head>
<body>
	<div id="outerFrame">
		<div id="camCell" class="nounderline">
			<div style="overflow: hidden; width: 100%; height: 100%; position: relative;">
				<img id="imgFrame" class="CamImg" />
			</div>
			<img id="cornerMenuResizeButton" src="Images/Corner_Scroll.png" style="opacity: 0.0" />
		</div>
		<div id="rightMenu" class="nounderline" style="border-left: 2px solid #000000">
			<div id="zoomlabel" class="sliderlabel">
				Zoom</div>
			<div id="zoomslider" class="sliderwrapper">
				<div>
					<img class="sliderbtn sliderup" src="Images/Btn_up_blue_1.png" />
				</div>
				<div class="slidertrackwrapper">
					<div class="slidertrack">
					</div>
					<img class="sliderbtn sliderhandle" src="Images/Slider_1.png" />
				</div>
				<div style="margin-top: 5px">
					<img class="sliderbtn sliderdn" src="Images/Btn_dn_blue_1.png" />
				</div>
			</div>
			<img id="btn3dPos" class="togglebtn" imgname="3dpos" src="Images/3dpos_1.png" style="margin-left: 3px;" />
		</div>
		<div id="bottomMenu" class="nounderline" style="border-top: 2px solid #333333;">
			<img id="panoramaimg" />
		</div>
		<!--<tr>
					<td id="pthCell" class="nounderline">
						<div id="pthDiv">
							<table style="width: 100%;" class="ptztable">
								<tbody>
									<tr>
										<td class="ptzButtonCell">
											<div class="zfi">
												<div id="zoomControls">
													<a href="javascript:Zoom(10)" class="increase"></a><span class="label">Zoom </span>
													<a href="javascript:Zoom(-10)" class="decrease"></a>
												</div>
												<a href="javascript:Focus(1000)" class="increase"></a><span class="label">Focus
												</span><a href="javascript:Focus(-1000)" class="decrease"></a><a href="javascript:Iris(5)"
													class="increase"></a><span class="label">Iris </span><a href="javascript:Iris(-5)"
														class="decrease"></a>
											</div>
										</td>
										<td>
											<div id="gridDiv">
												<img id="fullPanoramaImage" src="PTZPRESETIMG?id=hamshackptz&index=99999&nocache=635335006583973590"
													onload="fullPanoramaImageLoaded(); return false;"></div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</td>
				</tr>-->
	</div>
	<div style="display: none">
		<img src="Images/Btn_up_blue_1.png" /> <img src="Images/Btn_up_blue_2.png" /><img
			src="Images/Btn_up_blue_3.png" /><img src="Images/Btn_dn_blue_1.png" /><img src="Images/Btn_dn_blue_2.png" /><img
				src="Images/Btn_dn_blue_3.png" /> <img src="Images/Btn_up_red_1.png" />
		<img src="Images/Btn_up_red_2.png" /><img src="Images/Btn_up_red_3.png" /><img src="Images/Btn_dn_red_1.png" /><img
			src="Images/Btn_dn_red_2.png" /><img src="Images/Btn_dn_red_3.png" /><img src="Images/Slider_1.png" /><img
				src="Images/Slider_2.png" /><img src="Images/Slider_3.png" /><img src="Images/3dpos_1.png" /><img
					src="Images/3dpos_2.png" /><img src="Images/3dpos_3.png" /><img src="Images/3dpos_4.png" />
	</div>
	<div id="zoomhint" style="display: none">
	</div>
	<div id="thumbnailbox">
		<div id="thumbnailboxinner">
		</div>
	</div>
	<div id="thumbnailboxServer">
		<div id="thumbnailboxinnerServer">
		</div>
	</div>
	<div id="client3dposbox" class="posbox3d">
	</div>
	<div id="server3dposbox" class="posbox3d">
	</div>
</body>
</html>
